
<!doctype html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>随机点名</title>
		<style type="text/css">
			* { margin: 0; padding:0; }
			table { margin: 20px auto; }
			table td { border: 1px solid #ccc; background-color: yellowgreen; border-collapse: collapse;padding: 5px;font-size: 25px;
			margin:10px; width:80px; height: 60px; text-align: center; line-height: 30px;}
			h3 { text-align: center; font-size: 30px; font-weight: normal; height: 60px; line-height: 60px;}
			input { width: 80px; height: 40px; font:18px/40px "微软雅黑"; margin: 0 50px; background-color: #ddd;
			cursor: pointer; outline: none;}
			input:hover { background-color: #eee;}
			.btn {text-align: center;}
		</style>
	</head>
	<body>
		<h3 style="color: red;">python 36期 点名座位表</h3>
		<div id="con"></div>
		<div class="btn">
			<input type="button" id="btn" value="high起来" />
			<input type="button" id="btn2" value="恭喜你" />
		</div>
	</body>
	<script type="text/javascript">
		function $(id){
			return document.getElementById(id);
		}
		var oBtn=$("btn"),oBtn2=$("btn2"),con = $('con');
		var dian=null;//初始化一个变量 等于空

				
		var arr = [
			["王丰", "龚海玉", "陆佩佩", "钟粮","李闯","李磊", "程航", "胡静宇", "崔相相", "胡殿柱","白昊霖", "王鹏", "张嘉琪"],
	        ["王建雄", "潘从臣", "杨学伟", "李赫","马小龙", "邢浩", "刘晋", "田伟", "吴杨", "郗少博", "卢鑫", "贾舒婷", "李思翰"],
	        ["刘侣桥", "赵立伟", "程鹏", "周元龙", "彭期","靳喆",  "齐登科", "刁乃儒", "杨磊", "邵允超","李申", "阳国强","陈天龙"],
	        ["龚喜", "程村国", "王伟", "周金海", "刘申申","唐京天", "张子博", "蔡承君", "张立俊", "吴贻军", "刘天祥", "李相田", "姚振财"],
	        ["王涛", "闫玉良", "冉兴宏", "彭宇", "冯伟杰","朱中辉", "康文举", "陈志豪", "胡志鹏", "马上居", "王肖莉", "黄中龙", "李晓飞"],
	        ["武鑫", "刘锁", "陈金", "李雅蓉", "高扬","李贵媛", "胡墨冉", "海迪", "朱毅", "韩康康", "黄瑞鹏", "", ""],
        ];

        var str = "<table>";
        for(var i = 0; i < arr.length; i++) {
        	str += "<tr>";
        	for(var k = 0; k < arr[i].length; k++) str += "<td>"+arr[i][k]+"</td>";
        	str += "</tr>";
        }
        str +="</table>"
        con.innerHTML = str;
       
        var cell = con.getElementsByTagName('td');
        for(var i = 0; i < cell.length; i++) {
        	if(cell[i].innerHTML=="") cell[i].style.cssText= "background:none;border:none"; 
        }
		var newArr = [];
		for(var i = 0; i < arr.length; i++) newArr = newArr.concat(arr[i]);
		
		//点名函数
		function rand_stu(){
			var Index=Math.floor(Math.random()*newArr.length);//0 1 23 4567
			if(newArr[Index]!="" && newArr[Index]!="讲师" && Index!=96) {
				for(var i = 0; i < cell.length; i++) {
					cell[i].style.backgroundColor = (cell[i].innerHTML=="")?"#fff":"yellowgreen";
					
				}	
				cell[Index].style.backgroundColor = "rgba(255,0,0,0.5)";
				
			}
		}
		//单击开始
		oBtn.onclick=function(){
			if(dian) return;
			dian=setInterval(rand_stu,100);
		}
		//单击停止
		oBtn2.onclick=function(){
			clearInterval(dian);//清除定时器
			dian=null;//变量改回空
		}
		
	</script>
</html>
